<template>
  <view class="post-card">
    <!-- 用户信息 -->
    <view class="user-info">
      <image 
        class="avatar" 
        :src="post.avatar" 
        mode="aspectFill"
        @click="$emit('user-click')"
      />
      <view class="user-meta">
        <view class="nickname">{{ post.nickname }}</view>
        <view class="time">{{ formatTime(post.createTime) }}</view>
      </view>
      <view class="tag" v-if="post.tag && post.tag !== 'all'">{{ getTagName(post.tag) }}</view>
    </view>
    
    <!-- 内容 -->
    <view class="content">{{ post.content }}</view>
    
    <!-- 图片 -->
    <view class="images" v-if="post.images && post.images.length > 0">
      <view class="image-grid" :class="getImageLayoutClass(post.images.length)">
        <image 
          v-for="(image, index) in post.images" 
          :key="index"
          class="image-item"
          :src="image"
          mode="aspectFill"
          @click="$emit('image-preview', index)"
        />
      </view>
    </view>
    
    <!-- 操作栏 -->
    <view class="action-bar">
      <view class="action-item" @click="$emit('like-click')">
        <text class="iconfont" :class="{ 'icon-liked': post.isLiked }">{{ post.isLiked ? '❤️' : '🤍' }}</text>
        <text class="count">{{ post.likeCount }}</text>
      </view>
      <view class="action-item" @click="$emit('comment-click')">
        <text class="iconfont">💬</text>
        <text class="count">{{ post.commentCount }}</text>
      </view>
      <view class="action-item" v-if="isOwner" @click="$emit('delete-click')">
        <text class="iconfont">🗑️</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

const props = defineProps({
  post: {
    type: Object,
    required: true
  },
  isOwner: {
    type: Boolean,
    default: false
  }
});

// 格式化时间
const formatTime = (timestamp) => {
  if (!timestamp) return '';
  
  const date = new Date(timestamp);
  const now = new Date();
  const diff = now - date;
  
  // 一分钟内
  if (diff < 60 * 1000) {
    return '刚刚';
  }
  
  // 一小时内
  if (diff < 60 * 60 * 1000) {
    return `${Math.floor(diff / (60 * 1000))}分钟前`;
  }
  
  // 一天内
  if (diff < 24 * 60 * 60 * 1000) {
    return `${Math.floor(diff / (60 * 60 * 1000))}小时前`;
  }
  
  // 一周内
  if (diff < 7 * 24 * 60 * 60 * 1000) {
    return `${Math.floor(diff / (24 * 60 * 60 * 1000))}天前`;
  }
  
  // 其他情况显示完整日期
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
};

// 获取标签名称
const getTagName = (tagId) => {
  const tags = store.getters['community/tagList'];
  const tag = tags.find(t => t.id === tagId);
  return tag ? tag.name : '';
};

// 获取图片布局类名
const getImageLayoutClass = (imageCount) => {
  if (imageCount === 1) return 'single';
  if (imageCount === 2) return 'double';
  if (imageCount === 3) return 'triple';
  if (imageCount === 4) return 'quad';
  return 'grid';
};
</script>

<style lang="scss" scoped>
.post-card {
  margin: 12px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    
    .avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      margin-right: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      border: 2px solid #ffffff;
    }
    
    .user-meta {
      flex: 1;
      
      .nickname {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
        margin-bottom: 4px;
      }
      
      .time {
        font-size: 12px;
        color: #999999;
      }
    }
    
    .tag {
      font-size: 12px;
      color: #007aff;
      background-color: rgba(0, 122, 255, 0.1);
      padding: 5px 10px;
      border-radius: 12px;
      font-weight: 500;
      box-shadow: 0 1px 3px rgba(0, 122, 255, 0.1);
    }
  }
  
  .content {
    font-size: 16px;
    color: #333333;
    line-height: 1.6;
    margin-bottom: 20px;
    word-break: break-all;
    letter-spacing: 0.3px;
  }
  
  .images {
    margin-bottom: 20px;
    
    .image-grid {
      display: flex;
      flex-wrap: wrap;
      
      &.single {
        .image-item {
          width: 85%;
          height: 240px;
          border-radius: 16px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }
      }
      
      &.double {
        .image-item {
          width: calc(50% - 6px);
          height: 160px;
          margin-right: 12px;
          margin-bottom: 0;
          border-radius: 14px;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
          
          &:nth-child(2n) {
            margin-right: 0;
          }
        }
      }
      
      &.triple {
        .image-item {
          width: calc(33.33% - 8px);
          height: 120px;
          margin-right: 12px;
          border-radius: 12px;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
          
          &:nth-child(3n) {
            margin-right: 0;
          }
        }
      }
      
      &.quad, &.grid {
        .image-item {
          width: calc(50% - 6px);
          height: 120px;
          margin-right: 12px;
          margin-bottom: 12px;
          border-radius: 12px;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
          
          &:nth-child(2n) {
            margin-right: 0;
          }
        }
      }
    }
  }
  
  .action-bar {
    display: flex;
    border-top: 1px solid #f0f0f0;
    padding-top: 16px;
    margin-top: 4px;
    
    .action-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #666666;
      height: 40px;
      position: relative;
      
      &:after {
        content: '';
        position: absolute;
        right: 0;
        top: 20%;
        height: 60%;
        width: 1px;
        background-color: #f2f2f2;
      }
      
      &:last-child:after {
        display: none;
      }
      
      .iconfont {
        margin-right: 6px;
        font-size: 20px;
      }
      
      .count {
        font-size: 14px;
      }
      
      &:active {
        opacity: 0.7;
        background-color: #f9f9f9;
        border-radius: 8px;
      }
      
      &.icon-liked {
        color: #ff5a5f;
      }
    }
  }
}
</style>
